<template>
  <div class="team-container">
    <div class="search-container">
      <el-input
        placeholder="搜索球队名称或描述"
        v-model="keyword"
        class="search-input"
        prefix-icon="el-icon-search"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </div>
    
    <el-row :gutter="20" class="team-list">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="team in teams" :key="team.id" class="team-item-col">
        <el-card class="team-card" shadow="hover" @click.native="goToTeamDetail(team.id)">
          <div class="team-logo">
            <img :src="getImageUrl(team.logoUrl)" alt="球队Logo">
          </div>
          <div class="team-info">
            <h3 class="team-name">{{ team.name }}</h3>
            <p class="team-desc">{{ truncateDescription(team.description) }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'TeamList',
  data() {
    return {
      teams: [],
      keyword: '',
      currentPage: 1,
      pageSize: 12,
      total: 0
    }
  },
  created() {
    this.fetchTeams()
  },
  methods: {
    async fetchTeams() {
      try {
        const res = await request({
          url: '/api/teams/list',
          method: 'get',
          params: {
            keyword: this.keyword,
            page: this.currentPage,
            size: this.pageSize
          }
        })
        this.teams = res.data.records
        this.total = res.data.total
      } catch (error) {
        console.error('获取球队列表失败', error)
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchTeams()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchTeams()
    },
    goToTeamDetail(teamId) {
      this.$router.push(`/teams/${teamId}`)
    },
    getImageUrl(url) {
      if (!url) return require('@/assets/default-team.png')
      return `http://localhost:8088/api/file/get/${url}`
    },
    truncateDescription(desc) {
      if (!desc) return '暂无描述'
      return desc.length > 50 ? desc.substring(0, 50) + '...' : desc
    }
  }
}
</script>

<style scoped>
.team-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  max-width: 500px;
}

.team-list {
  margin-bottom: 20px;
}

.team-item-col {
  margin-bottom: 20px;
}

.team-card {
  height: 280px;
  cursor: pointer;
  transition: all 0.3s;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.team-logo {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.team-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.team-info {
  padding: 0 10px;
}

.team-name {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #303133;
}

.team-desc {
  font-size: 14px;
  color: #606266;
  margin: 0;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 